import React from 'react'
import { Button, Space, Tabs, Modal } from 'antd'
import styles from './warningStyle.less'
import cameraImg from '../../../../../assets/camera.jpg'
import Sendpolice from './component/Sendpolice'
import Historicalalarm from './component/historicalalarm'
import { connect } from 'react-redux'
import * as actions from '../request/action'
import { IP } from '../../../../../utils/request'
import moment from 'moment'
import Zmage from 'react-zmage'
const { TabPane } = Tabs

class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,//派警弹框
            current: '1',//默认的选的Tabs
            Switchid: '' //切换的告警id
        }
    }
    state = { size: 'small' };
    onChange = e => {
        this.setState({ size: e.target.value });
    };
    componentDidMount() {
        this.props.GetAlarmdetails(this.props.information.id)
    }
    change = (information) => {
        this.setState({
            current: '1',
            Switchid: information.id
        }, () => {
            this.props.GetAlarmdetails(this.state.Switchid)
        })
    }
    changes = (activeKey) => {
        this.setState({
            current: activeKey
        })
    }
    identification = () => {
        let information = {
            key: this.state.Switchid == '' ? this.props.information.id : this.state.Switchid,
            isDistribute: 'notDistribute',
            camerId: this.props.id,
            currentpage: this.props.currentpage - 1
        }
        this.props.Distribute(information)

    }
    render() {
        const { size } = this.state
        const { information } = this.props
        let object = {
            warningTime: '', //告警时间
            Manualscreening: '',  //人工甄别
            status: '', //告警状态
            warningType: '',//告警类型
            isDistribute: '', //是否派警
            //  objectType:'', //目标类型
            userName: '', //反馈人
            feedbackTime: '', //反馈时间
            feedbackContent: ''
        }
        if (this.props.Alarmdetails.length != 0) {
            object.warningTime = moment(this.props.Alarmdetails[0].warningTime).format('YYYY-MM-DD HH:mm')
            object.Manualscreening = this.props.Alarmdetails[0].isManpower == false ? '否' : '是'
            object.warningType = this.props.Alarmdetails[0].warningType
            // object.isDistribute=this.props.Alarmdetails[0].isDistribute==0?'否':'是'
            // object.objectType =this.props.Alarmdetails[0].objectType
            if (this.props.Alarmdetails[0].isDistribute == '') {
                object.isDistribute = '未处理'
            }
            if (this.props.Alarmdetails[0].isDistribute != '') {
                object.isDistribute = this.props.Alarmdetails[0].isDistribute == 0 ? '不派警' : '已派警'
            }
            object.status = this.props.Alarmdetails[0].status
            object.userName = this.props.Alarmdetails[0].userName
            if (this.props.Alarmdetails[0].feedbackTime == '') {
                object.feedbackTime = ''
            }
            if (this.props.Alarmdetails[0].feedbackTime != '') {
                object.feedbackTime = moment(this.props.Alarmdetails[0].feedbackTime).format('YYYY-MM-DD HH:mm')
            }
            object.feedbackContent = this.props.Alarmdetails[0].feedbackContent
            object.warningPhoto = this.props.Alarmdetails[0].warningPhoto
            object.warningAddress = this.props.Alarmdetails[0].warningAddress
        }
        return (
            <div className={styles.totall}>
                {object.status != '疑似' || object.isDistribute == '已派警' ? <div style={{ height: '50px' }}></div> :
                    <div className={styles.sendPolice} >
                        <Space style={{ marginLeft: "750px" }} >
                            <Button onClick={() => this.setState({ visible: true })} danger ghost>派警</Button>
                            <Button onClick={() => { this.identification() }} ghost >识别正确不派警</Button>
                        </Space>
                    </div>
                }
                <div>
                    <Tabs className={styles.Tabs} type="card" defaultActiveKey='1' activeKey={this.state.current} onChange={this.changes} >
                        <TabPane tab="告警详情" key="1" >
                            <div className={styles.information_content}>
                                <div className={styles.information_left}>
                                    <div className={styles.detail}>告警地点:{object.warningAddress}</div>
                                    <div className={styles.detail}>告警时间:{object.warningTime}</div>
                                    <div className={styles.detail}>是否人工甄别:{object.Manualscreening}</div>
                                    <div className={((object.status == '确认' && object.isDistribute == '不派警') || (object.status == '疑似' && object.Manualscreening == '否')) ? styles.hide : styles.show}>反馈人:{object.userName}</div>
                                </div>
                                <div className={styles.information_center}>
                                    <div className={styles.detail}>告警类型:{object.warningType}</div>
                                    <div className={styles.detail}>状态:{object.status}</div>
                                    <div className={styles.detail}>是否派警:{object.isDistribute}</div>
                                    <div className={((object.status == '确认' && object.isDistribute == '不派警') || (object.status == '疑似' && object.Manualscreening == '否')) ? styles.hide : styles.show}>反馈时间:{object.feedbackTime}</div>
                                </div>
                                <div className={styles.information_right}>
                                    {/* <div>目标类型:{object.objectType}</div> */}
                                    <div className={((object.status == '确认' && object.isDistribute == '不派警') || (object.status == '疑似' && object.Manualscreening == '否')) ? styles.hide : styles.show}>反馈内容:{object.feedbackContent}</div>
                                </div>
                            </div>
                            <div className={styles.img}>
                                <Zmage src={IP + object.warningPhoto} alt="" style={{ width: '600px', height: '350px' }} />
                            </div>

                        </TabPane>
                        <TabPane tab="24小时历史告警" key="2">
                            <Historicalalarm id={this.props.id} change={this.change} />
                        </TabPane>

                    </Tabs>
                </div>
                <Modal
                    title='巡线工列表'
                    visible={this.state.visible}
                    getContainer={false}
                    destroyOnClose
                    centered
                    onCancel={() => { this.setState({ visible: false }) }}
                    // onOk={() => { this.setState({ visible: false }) }}   
                    footer={null}
                >
                    <Sendpolice id={this.state.Switchid == '' ? information.id : this.state.Switchid} close={() => { this.setState({ visible: false }) }} camerId={this.props.id} currentpage={this.props.currentpage} />
                </Modal>

            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    Alarmdetails: state.Mapcamera.GetAlarmdetails
})
const mapDispatchToProps = (dispatch) => ({
    getAllCamera() {
        dispatch(actions.getAllCamera())
    },
    GetAlarmdetails(id) {
        dispatch(actions.GetAlarmdetails(id))
    },
    Distribute(information) {
        dispatch(actions.Distribute(information))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Index);